<template>
  <div class="follow-page">
    <div class="title-nav">
      <div class="title">我的关注</div>
    </div>
    <div class="scroll">
      <template v-if="tableInfo.tableData.length === 0">
        <div class="empty">
          <n-empty size="large" description="暂无数据~"></n-empty>
        </div>
      </template>
      <template v-else>
        <div class="list">
          <div
            class="user-card"
            v-for="item in tableInfo.tableData"
            :key="item.id"
          >
            <img
              class="avatar-img cursor-pointer"
              @click="handDetail(item)"
              :src="item.avatar"
              alt=""
            />
            <div class="info">
              <div class="username cursor-pointer" @click="handDetail(item)">
                {{ item.nickname }}
              </div>
              <div class="tags">
                <div class="tag">作品 {{ item.work_count }}</div>
                <div class="tag">粉丝 {{ item.follows_count }}</div>
              </div>
              <n-button
                class="flow-btn"
                strong
                secondary
                @click.stop="handCancel(item.follow_id)"
              >
                <span>已关注</span>
              </n-button>
            </div>
            <div class="imgs">
              <div class="img" @click="handContentDetail(item)">
                <img :src="item.photoFirst.cover" alt="" />
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="pagination" v-if="tableInfo.tableData.length > 0">
        <n-pagination
          v-model:page="tableInfo.queryForm.current"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        ></n-pagination>
      </div>
    </div>
    <confirm-dia
      ref="confirmRef"
      title="确定要取消关注此用户吗？"
      @confirm="handConfirm"
    />
  </div>
</template>
<script setup lang="ts">
import { NButton, NEmpty, NPagination } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import followApi from '@/service/api/follow'
const ConfirmDia = defineAsyncComponent(
  () => import('@/components/ConfirmDia.vue')
)
defineOptions({
  name: 'UserFollow'
})
const { tableInfo, fetchData, pageChange, sizeChange } = useApi({
  isPaging: true,
  isRequest: true,
  getData: followApi.list,
  initForm: {}
})

const confirmRef = ref()
let oldId = 0
const handCancel = (id: number) => {
  oldId = id
  confirmRef.value.open()
}
const handConfirm = async () => {
  const { code, msg } = await followApi.cancel({
    userid: oldId
  })
  if (code !== 0) {
    return msgUtil.$message.error(msg)
  }
  msgUtil.$message.success('取关成功')
  fetchData()
}
const router: any = useRouter()
const handDetail = (e: any) => {
  router.push({
    path: '/userPage',
    query: {
      id: e.follow_id
    }
  })
}
const handContentDetail = (e: any) => {
  router.push({
    path: e.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.photoFirst.id
    }
  })
}
</script>

<style scoped lang="scss">
.follow-page {
  min-height: 1420px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  .title-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid #eeeeee;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .more {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #f1423d;
      }
      i {
        margin-left: 4px;
        font-size: 14px;
        color: #f1423d;
      }
    }
  }
  .scroll {
    .empty {
      padding-top: 120px;
    }
    .pagination {
      padding: 20px;
      display: flex;
      justify-content: center;
    }
    .list {
      min-height: 400px;
    }
    .user-card {
      padding: 31px 32px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      .avatar-img {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        object-fit: cover;
      }
      .info {
        flex: 1;
        margin-left: 32px;
        .username {
          font-size: 18px;
          font-weight: bold;
          color: #333333;
        }
        .tags {
          display: flex;
          align-items: center;
          gap: 10px;
          .tag {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
        .flow-btn {
          margin-top: 24px;
          width: 92px;
          height: 34px;
          background: #f5f5f5;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
      .imgs {
        display: flex;
        align-items: center;
        .img {
          margin-left: 16px;
          position: relative;
          img {
            width: 205px;
            height: 152px;
            border-radius: 12px;
            object-fit: cover;
            display: block;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
